<template>
	<view class="wanl-withdraw">
		<view class="padding-tb-bj bg-white">
			<view class="bank">
				<view class="content" style="height: 80rpx; line-height: 80rpx">
					<text>对方账户</text>
				</view>
				<view class="action">
					<input type="number" maxlength="11" focus v-model="config.jh_id" placeholder="请输入对方账户" @blur="getuser" @input="userinfo = {}" />
				</view>
			</view>
			<view class="bank" v-if="userinfo.nickname">
				<view class="content" style="height: 80rpx; line-height: 80rpx">
					<text>将转给</text>
				</view>
				<view class="action">
					<image class="image" :src="userinfo.avatar" mode=""></image>
					<view class="">{{ userinfo.nickname }}</view>
				</view>
			</view>
		</view>

		<view class="padding-bj bg-white margin-top money">
			<view class="text-lg">
				<text>转账数量</text>
			</view>
			<view class="margin-tb-bj price">
				<input placeholder="0.00" :value="money" type="digit" maxlength="5" focus @input="replaceInput" />
			</view>
			<view class="solid-top padding-top-bj">
				<text class="wanl-gray-light">可用共生值</text>
				<text class="wanl-gray-light margin-lr-xs text-price" style="color: #f66ef1">{{ +user.score }}</text>
			</view>
		</view>
		<view class="padding-bj margin-top">
			<!-- 1.0.5升级 -->
			<button class="mix-btn wanl-bg-redorange an" :loading="loading" :disabled="loading" @tap="withdraw">确认转账</button>
		</view>
		<uni-popup ref="popup" :mask-click="false">
			<view class="bg-white popup-box">
				<view class="title">输入交易密码</view>
				<view class="xx">
					<yi-code hide="*" @onComplete="mm"></yi-code>
				</view>
				<view class="btn-g">
					<view class="btn" @click="xx">取消</view>
					<view class="btn qd" @click="ok">确定</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import { mapState } from 'vuex';
export default {
	data() {
		return {
			mima: '',

			userinfo: {},
			config: {
				jh_mobile: '',
				jh_id: '',
				jh_sxf_rate: ''
			},
			zh: '',
			xq: 0,
			bankData: null,
			usermoney: 0,
			money: '',
			servicemoney: 0,
			servicefee: 0,
			loading: false
		};
	},
	onLoad(e) {},
	computed: {
		...mapState(['user', 'common', 'statistics'])
	},

	methods: {
		getuser() {
			uni.request({
				url: `/user/getUserMsg?user_id=${this.config.jh_id}`,
				method: 'GET',
				success: (res) => {
					console.log(111, res);
					this.userinfo = res.data;
				}
			});
		},

		async withdraw() {
			// 1.0.6升级
			if (!this.config.jh_id) {
				this.$wanlshop.msg('请填写对方账户');
				this.loading = false;
				return;
			}
			if (!this.userinfo?.id) {
				this.$wanlshop.msg('对方账户不存在');
				this.loading = false;
				return;
			}
			if (+this.money <= 0) {
				this.$wanlshop.msg('请填写正确金额');
				return;
			}
			if (this.statistics.is_pwd_method == 1) {
				this.$wanlshop.on(`/pages/user/auth/mima?type=1&mobile=${this.user.mobile}`);
				return;
			}
			this.$refs.popup.open();
		},
		xx() {
			this.$refs.popup.close();
			this.mima = '';
		},
		mm(e) {
			this.mima = e;
		},
		async ok(e) {
			console.log(e);
			// 1.0.5升级 修复针对多次点击
			if (this.loading) return;
			this.loading = true;
			let money = parseFloat(this.money);

			if (!this.mima) {
				this.$wanlshop.msg('请填写交易密码');
				this.loading = false;
				return;
			}
			if (money <= 0) {
				this.$wanlshop.msg('请填写正确金额');
				this.loading = false;
				return;
			}
			await uni.request({
				url: '/user/mutualism',
				method: 'POST',
				data: {
					collect_user_id: this.config.jh_id,
					nums: money,
					type: 1,
					password: this.mima
				},
				success: (res) => {
					uni.showToast({
						icon: 'none',
						title: '转账成功'
					});
					this.xx();
					this.$store.commit('user/setUserInfo', { score: +this.user.score - money });
				},
				complete: () => {
					this.loading = false;
				}
			});
		},
		setMoney(money) {
			this.usermoney = money;
			// this.$store.commit('user/setUserInfo', { score: money });
		},
		replaceInput(e) {
			this.money = e.target.value;
			this.servicemoney = e.target.value > 0 ? ((e.target.value * +this.config.jh_sxf_rate) / 100).toFixed(2) : 0;
		},
		emptyInput() {
			this.money = null;
		},
		moneyAll() {
			this.money = +this.user.score;
		},
		getCode(str) {
			str = str.replace(/\s+/g, '');
			return str.substring(str.length - 4);
		},
		getType(key) {
			return ['储蓄卡', '信用卡'][key];
		}
	}
};
</script>

<style scoped>
.wanl-withdraw {
	background-color: #f9f9f9;
	min-height: 100vh;
	box-sizing: border-box;
	padding: 25rpx;
}
.wanl-withdraw .money .symbol {
	font-size: 60rpx;
	margin-right: 10rpx;
}

.wanl-withdraw .money .price {
	display: flex;
	align-items: center;
}
.wanl-withdraw .money .price input {
	/* #ifdef MP */
	height: 100rpx;
	min-height: 100rpx;
	/* #endif */
	width: 100%;
	font-size: 100rpx;
}

.wanl-withdraw .bank {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: #ffffff;
	padding: 20rpx 25rpx;
}
.wanl-withdraw .bank image {
	width: 100rpx;
	height: 100rpx;
}
.wanl-withdraw .bank .content {
}
.wanl-withdraw .bank .action {
	text-align: right;
	display: flex;
	align-items: center;
	.image {
		width: 64rpx;
		height: 64rpx;
		border-radius: 50%;
		margin-right: 10rpx;
	}
}
.padding-tb-bj,
.padding-bj {
	border-radius: 20rpx;
}
.popup-box {
	width: 560rpx;
	height: 448rpx;
	background: #ffffff;
	border-radius: 40rpx;
	display: flex;
	flex-direction: column;
	padding: 38rpx 0;
	box-sizing: border-box;
	.title {
		text-align: center;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 32rpx;
		color: #000000;
		line-height: 48rpx;
		font-style: normal;
		text-transform: none;
	}
	.xx {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.btn-g {
		justify-content: space-around;
		display: flex;
		.btn {
			font-family: Source Han Sans, Source Han Sans;
			font-weight: 350;
			font-size: 28rpx;
			color: #3d3d3d;
			line-height: 40rpx;
			text-align: left;
			font-style: normal;
			text-transform: none;
			width: 217rpx;
			height: 68rpx;
			background: #e9e9e9;
			border-radius: 200rpx 200rpx 200rpx 200rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.qd {
			background: #f66ef1;
			color: #fff;
		}
	}
}
/deep/.uni-transition {
	background-color: rgba(0, 0, 0, 0.3) !important;
}
</style>
